<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" >
		<el-form :inline="true" :model="filters" :size="size">
			<el-row class="search-input">
				<el-form-item label="客户名称：">
				<el-input v-model="filters.client" placeholder="客户名称"></el-input>
				</el-form-item>
				<el-form-item label="订单编号：">
				<el-input v-model="filters.orderno" placeholder="订单编号"></el-input>
				</el-form-item>
				<el-form-item label="开票状态：">
				<!-- <el-input v-model="filters.invoice_status" placeholder="开票状态"></el-input> -->
				    <el-select v-model="filters.invoice_status" >
						<el-option label="未开票" value="1">未开票</el-option>
						<el-option label="已开票" value="0">已开票</el-option>
					</el-select>
				</el-form-item>
			</el-row>
			
			
			<el-row class="search-button">
				
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<!-- <el-form-item>
					<kt-button icon="fa fa-plus" :label="$t('action.add')"  type="primary" @click="handleAdd" />
				</el-form-item> -->
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				
				
			</el-row>
			
		</el-form>
	</div>
	<div class="toolbar" >
		<el-form :inline="true" :size="size">
			<el-form-item class="w100 t_r">
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				<el-tooltip content="导出" placement="top">
					<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" ></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
	</div>
	<!--表格内容栏-->
	<cy-table :height="350"
		:data="pageResult" :columns="filterColumns"
		@findPage="findPage"  ref="CyTable"
		 :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false :showDetailOperation=true @handleDetail="handleDetail" >
	</cy-table>
	<!--新增编辑界面-->
	<el-dialog :title="operation?'查看':'查看'" width="65%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="120px" ref="dataForm" :size="size"
			label-position="right" inline>
			<el-form-item label="ID：" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
			</el-form-item>
			
			<el-row class="searchDialog-input">
				<el-form-item label="订单编号：" prop="orderno">
						<el-input v-model="dataForm.orderno"  auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				
				<el-form-item label="商家：" prop="businessman">
					<el-input v-model="dataForm.businessman"  auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
		        <el-form-item label="客户：" prop="client">
						<el-input v-model="dataForm.client"  auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="订单金额：" prop="amount">
						<el-input v-model="dataForm.amount" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
			</el-row>
			<!-- <el-row>
				
				<el-form-item label="付款状态" prop="payed_status">
					<el-input v-model="dataForm.payed_status" auto-complete="off"></el-input>
					<el-select v-model="dataForm.payed_status" style="width: 200px;">
						<el-option label="未付款" value="1">未付款</el-option>
						<el-option label="已付款" value="0">已付款</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发票类型" prop="type">
					<el-input v-model="dataForm.type" auto-complete="off"></el-input>
					<el-select v-model="dataForm.type" style="width: 200px;">
						<el-option label="增值税发票" value="1">增值税发票</el-option>
						<el-option label="普通发票" value="0">普通发票</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发票抬头" prop="invoice">
					<el-input v-model="dataForm.invoice" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="开票状态" prop="invoice_status">
					<el-select v-model="dataForm.invoice_status" style="width: 200px;">
						<el-option label="未开票" value="1">未开票</el-option>
						<el-option label="已开票" value="0">已开票</el-option>
					</el-select>
				</el-form-item>
			</el-row> -->
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" type="primary" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>
   
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import CyTable from "@/views/Core/CyTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import axios from 'axios'
export default {
	components:{
		PopupTreeInput,
		CyTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			imgUpload:this.utils.getUpLoadHost(),
			size: 'small',
			document_license:'',
			filters: {
				name: ''
			},
			
			imgs:'',
			fileList:{},
			columns: [], 
			warehouselist:[] , 
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {},
			dialogImageUrl: '',
			
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			printPage: false,
			dialogVisibleImage:false,
			dataForm: {
				
			},
			deptData: [],
			deptTreeProps: {
				label: 'name',
				children: 'children'
			},
			roles: [],
			ruleForm: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
				},
	
			
		}
	},
	methods: {
	   // 获取分页数据
		findPage: function (data) {
			 this.filters.t='invoiceManage'
			this.$refs.CyTable.findPage(this.filters) 
		},
		// 初始化
		queryUserList(){
			var that=this;
			this.utils.request.queryUserList({'t':'member'},function(data){
				that.warehouselist=data.data
			})
		},
        //弹窗关闭方法
		handleClose (){
			 this.$refs.dataForm.resetFields()
		},
		// 批量删除
		  handleDelete: function (data) {
            var ids='';
            for(var i=0;i<data.params.length;i++){
               ids=ids+data.params[i].id+',';
            }
            data.t='invoiceManage'
            data.ids=ids
            this.utils.request.deleteUserInfo(data,this.deleteInfoBack)
        },
        //删除callback
        deleteInfoBack(data){
	        if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败, ', type: 'error'})
			}
             this.findPage();
        },

	   //导入方法
	    importexe(){
         this.printPage=true;
	    },
	    handleRemove(file, fileList) {
        console.log(file, fileList);
		},
			handlePreview(file) {
			console.log(file);
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${ file.name }？`);
		},
      
      //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
			let filename="订单开票"
			this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename)
          }).catch(() => {
 
          });
		},
		// 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm.id="";
			//this.dataForm={};
			if (this.$refs['dataForm']!=undefined) {
				this.$refs['dataForm'].resetFields();
			}
			this.dataForm.document_license="";
		},
		// 打印
		print:function(){
		  this.printPage=true
		  this.operation = true
		},
		reset:function(){
		   this.filters={};
		   this.findPage()
		},
		
		// 显示编辑界面
		handleDetail: function (params) {
			console.log(params)
			this.dialogVisible = true
			this.operation = false
			var this_ = this;
			this.$nextTick(function(){
              this_.dataForm = Object.assign({}, params.row);
			});
		},
		// 编辑
		   submitForm: function () {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
	                    var this_ = this;
                        this.editLoading = true
                        let params = Object.assign({}, this.dataForm)
                        params.t='invoiceManage';
                        this.utils.request.editUserInfo(params,this.editInfoBack)
                    })
                }
            })
        },
        // 新增修改回调
        editInfoBack: function (data) {
			if(data.code == '0000') {
				this.$message({ message: '操作成功', type: 'success' })
			} else {
				this.$message({message: '操作失败', type: 'error'})
			}
            this.findPage();
            this.dialogVisible = false
            this.operation = false
            this.editLoading= false
        },
      
		
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},

		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				//{prop:"id", label:"ID", minWidth:50},
				{prop:"orderno", label:"订单编号", minWidth:120},
				{prop:"businessman", label:"商家", minWidth:120},
				{prop:"client", label:"客户", minWidth:120},
				{prop:"amount", label:"订单金额", minWidth:120},
				{prop:"payed_status", label:"付款状态", minWidth:120,formatter: this.status},
				{prop:"type", label:"发票类型", minWidth:120,formatter: this.type},
				{prop:"invoice", label:"发票抬头", minWidth:120},
				{prop:"invoice_status", label:"开票状态", minWidth:120,formatter: this.location},
				{prop:"create_time", label:"创建时间", minWidth:120},
			]
			  var temp = [];
            $.each(this.columns,function(key, val){           
               temp.push(val)
            }) 
            this.filterColumns = temp;  
      	},
       location: function(row, column, cellValue, index){
			if(cellValue==1){
				return '未开票'
			}else if(cellValue==0){
				return '已开票'
		   }
	   },
	   status: function(row, column, cellValue, index){
			if(cellValue==1){
				return '未付款'
			}else if(cellValue==0){
				return '已付款'
		   }
	   },
	   type: function(row, column, cellValue, index){
			if(cellValue==1){
				return '增值税发票'
			}else if(cellValue==0){
				return '普通发票'
		   }
	   }
	   
	},
	mounted() {
		this.findPage()
		this.initColumns()
		this.queryUserList()
	}
	
}
</script>
<style lang="scss" scoped>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
	font-size: 18px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 
</style>